<template>
  <div class="back-order">
    <PageHeader title="申请退单" />
    <div class="back-order-form">
      <div v-for="(item, index) in order.items" :key="index" class="row">
        <van-row gutter="20">
          <van-col span="4">
            <van-image
                width="40px"
                height="40px"
                :src="item.product && item.product.imageUrl ? require('@/'+`${item.product.imageUrl}`) : require('@/assets/products/default.png')"
            />
          </van-col>
          <van-col span="8">
            <p style="font-size: 14px; color: grey; line-height: 40px">{{ item.product ? item.product.productName : '商品名称' }}</p>
          </van-col>
        </van-row>
      </div>
      <van-field
          v-model="refundReason"
          label="退单原因"
          type="textarea"
          placeholder="请输入退单原因"
          rows="3"
      />
      <van-button
          round
          style="height: 30px; border-color: #FA6408; color: #FA6408"
          @click="submitBackOrder"
          class="submit-button"
      >
        提交申请
      </van-button>
    </div>
  </div>
</template>

<script>
import PageHeader from "@/components/PageHeader.vue";
import { Row as VanRow, Col as VanCol, Image as VanImage, Field as VanField, Button as VanButton } from 'vant';
import http from "@/plugins/http";

export default {
  name: "BackOrderView",
  components: {
    PageHeader,
    VanRow,
    VanCol,
    VanImage,
    VanField,
    VanButton
  },
  data() {
    return {
      refundReason: '',
      order: {
        items: []
      },
    };
  },
  activated() {
    const orderId = this.$route.params.orderId;
    this.fetchOrders(orderId);
  },
  methods: {
    fetchOrders(orderId) {
      if (orderId) {
        http.get(`/items/getById/${orderId}`)
            .then(response => {
              if (response.statusCode === '200') {
                // 假设 response.data 直接是商品的数组
                this.order = {
                  items: response.data
                };
              } else {
                console.log("订单出错");
              }
            })
            .catch(error => {
              console.error("获取订单信息出错:", error);
            });
      } else {
        console.log("没有订单");
      }
    },
    submitBackOrder() {
      if (this.refundReason.trim() === '') {
        this.$toast.fail('请填写退单原因！');
        return;
      }

      const orderId = this.$route.params.orderId;
      http.post('/order/refund', {
        orderId: orderId,
        info: this.refundReason,
      })
          .then(() => {
            this.$toast.success('退单申请提交成功！');
            this.$router.go(-1); // 返回上一个页面
          })
          .catch(() => {
            this.$toast.fail('退单申请提交失败');
          });
    },
  }
};
</script>

<style scoped>
.back-order {
  background-color: #F6F7F9;
  height: 100vh;
}

.back-order-form {
  background-color: white;
  padding: 20px;
}

.row {
  margin-bottom: 20px;
}

.submit-button {
  margin-top: 10px;
  margin-left: 260px;
}
</style>
